<template>
	<pd-popup ref='popup'>
		<view class="__common_popup_wrapper _car_model_select">
			<view class="__car_model_search flex aic">
				<input 
					type="text" 
					class="flex1" 
					placeholder="输入车牌型号 如：比亚迪e5" 
					v-model="carModelQuery.keyword"
					@input="searchModel"/>
				<text class="iconfont">&#xe60c;</text>
			</view>
			<scroll-view scroll-y class="__car_model_list " @scrolltolower="getMoreModel">
				<radio-group @change="modelSelect">
					<label for="" v-for="item in carModels" :key="item.id">
						<view class="__car_model_item flex jcsb aic">
							<view class="flex aic">
								<text class="iconfont _mr_24" style="color: #A4A6AD;">&#xe60d;</text>
								<text>{{ item.name }}</text>({{ item.series }})
								<text>{{ item.car_model_cat.name }}</text>
							</view>
							<radio :value="item.id" :checked="result === item.id"/>
						</view>
					</label>
				</radio-group>
			</scroll-view>
			<view class="__common_popup_footer flex jcsb">
				<button type="default" @tap="cancel">取消</button>
				<button type="primary" @tap='confirm'>确认</button>
			</view>
		</view>
	</pd-popup>
</template>

<script lang="ts" setup>
import PdPopup from './pd-popup.vue';
import type { TsHelp } from '../libs/ts-help';
import PD from '../libs';
import { useCompRef } from '../hooks/useRefs';
import type { ApiCarTypes } from '@/api/api-types/api-car-types';
import Api from '@/api/api-declare';
import type { WxFormChangeRes } from '../libs/wx-types';
import lodash from 'lodash';
const popup = useCompRef(PdPopup);
const result = ref(0);

let resolver: TsHelp.PromiseResolver<{ value: ApiCarTypes.CarModelItem }>;
let rejecter: () => void;

const open = (): Promise<{ value: ApiCarTypes.CarModelItem }> => {
	return new Promise((r, j) => {
		resolver = r;
		rejecter = j;
		popup.value?.open();
		!carModels.value.length && getCarModelList();
	});
};

const confirm = () => {
	if (!result.value) {
		PD.UniHelp.toast('请选择车型');
		return;
	};
	resolver && resolver({
		value: {...carModels.value.find(item => item.id === result.value) } as ApiCarTypes.CarModelItem
	});
	popup.value?.close();
};

const cancel = () => {
	rejecter && rejecter();
	popup.value?.close();
};

const carModels = ref<ApiCarTypes.CarModelItem[]>([]);
const carModelQuery = ref<ApiCarTypes.GetCarModelListReq>({
	keyword: '',
	limit: 20,
	offset: 0
});
let queryPage = 0;

const getCarModelList = (): Promise<void> => {
	return new Promise((r) => {
		PD.UniHelp.loading();
		carModelQuery.value.offset = carModelQuery.value.limit * queryPage;
		Api.ApiCar.getCarModelList(carModelQuery.value).then(res => {
			carModels.value = [...carModels.value, ...res];
			r();
		}).finally(() => PD.UniHelp.loading(false));
	});
};

const getMoreModel = () => {
	queryPage += 1;
	getCarModelList();
};


const searchModel = lodash.debounce(() => {
	queryPage = 0;
	carModels.value = [];
	getCarModelList();
}, 500);



const modelSelect = (e : WxFormChangeRes<string>) => {
	result.value = Number(e.detail.value);
};

defineExpose({
	open
});

</script>

<style lang="less" scoped>
._car_model_select {
	.__car_model_search {
		padding: 0 30rpx;
		height: 80rpx;
		border-radius: 42rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		border: 1px solid #E5E5E5;
		margin-bottom: 30rpx;

		.iconfont {
			margin-left: 30rpx;
			color: #C1C6D1;
		}
	}

	.__car_model_list {
		height: 60vh;
		font-size: 28rpx;
		color: #5C5C69;

		.__car_model_item {
			padding: 24rpx 20rpx;
			border-bottom: 1px solid #E5E5E5;

			radio {
				transform: scale(0.8);
			}
		}
	}
}
</style>